<template>
    <div class="bar_container">
        <div class="bar_items" v-for="(item,idx) in data" :key="idx">
            <div @click="barClick(item)" class="items" v-if="item.imgurl==''&&!item.tooltip" :style="item.itemStyle?item.itemStyle:''" :class="item.icon&&item.eventFalg?`${item.icon} pointer`:item.eventFalg?'pointer':item.icon?item.icon:''">{{item.label}}</div>
            <div @click="barClick(item)" class="items img_con" v-if="item.imgurl!='' &&!item.tooltip" :class="item.eventFalg?'pointer':''">
                <img :src="item.imgurl" alt="" :style="item.itemStyle?item.itemStyle:''">
            </div>
            <div @click="barClick(item)" :class="item.eventFalg?'items pointer':'items'" v-if="item.tooltip">
                <el-tooltip  effect="dark" :content="item.label" placement="top">
                    <span >
                        <i :class="item.icon" ></i>
                    </span>
                </el-tooltip>
            </div>
            <div v-if="item.vhtml" v-html="item.vhtml" @click="barClick(item)" :class="item.eventFalg?'items pointer':'items'"></div>
        </div>
    </div>
</template>
<script>
export default {
    name:"bar_item",
    data(){
        return{
        }
    },
    props:{
        data: {
            type: Array,
            default: function() {
                return [];
            }
        },
        allData: {
            type: Object,
            default: function() {
                return {};
            }
        },
    },
    methods:{
        barClick(item){
            if(item.eventFalg){
                this.$emit("handleBar",item,this.allData)
            }
        }
    },
}
</script>
<style lang="stylus">
.bar_container
    display flex
    flex-direction row
    align-items: center;
    .items
        margin-right 10px
    .pointer
        cursor pointer
</style>